﻿<script setup lang="ts" name="headerPackage2Source">
import logo from '@/assets/logo.svg'

const props = defineProps({
  config: { type: Object }
})
const moduleProperty:any = ref(props.config || {})
const topStyle:any = ref({})
watch(
  () => props.config,
  (val) => {
    moduleProperty.value = val
    topStyle.value.backgroundColor = moduleProperty.value.bgColor
    console.log(topStyle.value.backgroundColor)
  },
  {
    immediate: true,
    deep: true
  }
)
</script>

<template>
  <header>
    <div class="top" :style="topStyle">
      <div class="wrap">
        <p>{{moduleProperty.welcome}}</p>
      </div>
    </div>
    <div class="header-content">
      <div class="wrap">
        <a href="javascript:void(0)">
          <component class="logo-img" :is="logo"></component>
          <span>{{moduleProperty.name}}</span>
        </a>
      </div>
    </div>
  </header>
</template>

<style scoped lang="scss">
header{
  .top{
    height: 30px;
    background: var(--el-color-primary);

    p{
      height: 30px;
      color: var(--el-color-white);
      line-height: 30px;
    }
  }
}
</style>
